<template>
    <div :style="{ height: '500%', width: '100%' }" ref="myriskInDifferentAge"></div>
</template>

<script>
export default {
    name: "RiskInDifferentAge",
    data() {
        return {
            option: {
                title: {
                    text: 'Average Incidence Rate of Breast Cancer by Age Group in 2021'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    y: 30,
                    textStyle: {
                        fontSize: 15,
                    },
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    name: 'Age',
                    type: 'category',
                    boundaryGap: false,
                    data: [2, 3, 4, 5, 6, 7,1]
                },
                yAxis: {
                    name: 'percentage %',
                    type: 'value'
                },
                series: [
                    {
                        name: 'Email',
                        type: 'line',
                        stack: 'Total',
                        data: [0.8, 0.8, 0.8, 0.8, 0.9, 0.8, 0.8],
                        smooth: true
                    },
                ]
            },
        }
    },
    mounted() {
        this.riskInDifferentAge()
    },
    methods: {
        riskInDifferentAge() {
            let myChart = this.$echarts.init(this.$refs.myriskInDifferentAge);
            myChart.setOption(this.option);
        },
    }
}
</script>

<style>
</style>